﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Bootstrap/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    <script src="Bootstrap/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="Bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            

            //('[data-toggle="tooltip"]').tooltip();
            $("#btn11").tooltip();
            //            $('#myTooltip').tooltip({
            //                title: "我是一个提示框，我在顶部出现",
            //                placement: 'top'
            //            });

            $('#myPopover').popover({
                title: "我是弹出框的标题",
                content: "我是弹出框的内容",
                placement: "right"
            });

            $('.carousel').carousel();
        });
</script>
</head>
<body>
<div class="navbar navbar-default" role="navigation" style=" text-align:center;">
<div class="navbar-header">
   <a href="#" class="navbar-brand">XXX网站</a>
</div>
<ul class="nav navbar-nav">
  <li class="active"><a href="##">网站首页</a></li>
  <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">二级菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">测试xx</a></li>
<li><a href="##">联系我们</a></li>
<li><a href="##">关于我们</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
  <input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>

<button class="btn btn-primary" type="button" id="btn1" data-target=".bs-example-modal-lg" data-toggle="modal" data-backdrop="true">点击我</button>
<div class="modal fade bs-example-modal-lg" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        	<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" id="btn2">
小的模态弹出窗
</button>

<div class="modal fade bs-example-modal-sm" tabindex="0" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="model2">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题22222</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容22222</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<br />
<br />
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>


  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="bottom" 
          data-trigger="hover" 
          data-original-title="提示框在底部title" id="btn11">
  提示框在底部             
  </button>

  <h3>链接制作的提示框</h3>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="left" 
     title="提示框居左">
     提示框居左
  </a>

  <button type="button" class="btn btn-default" id="myPopover" data-trigger="hover" data-delay="{show:200,hide:500}">猛击我吧</button>'

  <br />
  <br />
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">标题一对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">标题二对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">标题三对应的内容</div>
        </div>
    </div>
</div>

<div id="slidershow" class="carousel">
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="#"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
            <div class="carousel-caption">
                <h3>图片标题1</h3>
                <p>描述内容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="#"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""/></a>
            <div class="carousel-caption">
                <h3>图片标题2</h3>
                <p>描述内容2...</p>
            </div>
        </div>
        <div class="item">
            <a href="#"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""/></a>
            <div class="carousel-caption">
                <h3>图片标题3</h3>
                <p>描述内容3...</p>
            </div>
        </div>
        <!-- 设置轮播图片控制器 -->
        <a class="left carousel-control" href="" >
            
        </a>
        <a class="right carousel-control" href="">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
 
</body>
</html>
